<template>
  <base-panel-md class="home-stats-by-type" title="设备运行总览">
    <v-chart class="pie" :options="option" />
    <template #right-btn>
      <base-btn @click="active = 0" class="duty" :active="active === 0">按占比</base-btn>
      <base-btn @click="active = 1" class="quantity" :active="active === 1">按数量</base-btn>
    </template>
  </base-panel-md>
</template>

<script>
import BasePanelMd from './BasePanelMd.vue';
import BaseBtn from './BaseBtn.vue';

export default {
  components: {
    BasePanelMd,
    BaseBtn,
  },
  data() {
    return {
      active: 0,
      option: {
        title: {
          text: '设备量占比',
          left: '12%',
          top: '79%',
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
        },
        color: ['#f7bc71', '#be7bf1', '#5bb1e9', '#47e498', '#e7686c'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          icon: 'circle',
          itemWidth: 7,
          itemHeight: 7,
          // type: 'scroll',
          orient: 'vertical',
          right: '20%',
          align: 'left',
          top: '6.428%',
          textStyle: {
            color: '#5e8cd7',
            fontSize: 10,
          },
          height: 90,
          itemGap: 7,
        },
        series: [
          {
            name: '设备运行总览',
            type: 'pie',
            radius: [0, 44],
            roseType: 'radius',
            data: [
              { value: 17, name: '电表' },
              { value: 18, name: '水表' },
              { value: 20, name: '电子班牌' },
              { value: 23, name: '风扇' },
              { value: 25, name: '照明' },
            ],
            label: {
              normal: {
                position: 'inner',
                show: false,
              },
            },
            center: ['23%', '39%'],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.home-stats-by-type {
  height: 25.278vh;
  margin-bottom: 1.204vh;
}

.pie {
  width: 100%;
  height: 100%;
}

.duty {
  margin-right: 1vw;
}

.quantity {
  margin-right: 1.708vw;
}
</style>
